<template>
    <div class="language-switcher">
        <van-dropdown-menu>
            <van-dropdown-item v-model="localLang" :options="options" />
        </van-dropdown-menu>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useAppStore } from '@/stores/app'
import { useI18n } from 'vue-i18n'

const appStore = useAppStore()
const { locale } = useI18n()

// 使用本地状态而不是计算属性
const localLang = ref(appStore.locale)

// 当本地语言变化时，更新应用语言
watch(localLang, (newLang) => {
    if (newLang !== appStore.locale) {
        appStore.setLocale(newLang)
        locale.value = newLang
    }
})

// 当应用语言变化时，更新本地语言
watch(
    () => appStore.locale,
    (newLang) => {
        if (newLang !== localLang.value) {
            localLang.value = newLang
        }
    }
)

const options = [
    { text: '简体中文', value: 'zh-CN' },
    { text: '繁體中文', value: 'zh-TW' },
    { text: 'English', value: 'en-US' },
]
</script>
